<template>
  <el-dialog
    title="图片剪裁"
    :visible.sync="visible"
    append-to-body
    v-draggable
  >
    <div class="cropper-content">
      <div class="cropper" style="text-align: center; height: 300px">
        <VueCropper
          ref="cropper"
          :img="option.img"
          :outputSize="option.outputSize"
          :outputType="option.outputType"
          :info="option.info"
          :canScale="option.canScale"
          :autoCrop="option.autoCrop"
          :autoCropWidth="option.autoCropWidth"
          :autoCropHeight="option.autoCropHeight"
          :fixed="option.fixed"
          :fixedNumber="option.fixedNumber"
          :full="option.full"
          :fixedBox="option.fixedBox"
          :canMove="option.canMove"
          :canMoveBox="option.canMoveBox"
          :original="option.original"
          :centerBox="option.centerBox"
          :height="option.height"
          :infoTrue="option.infoTrue"
          :maxImgSize="option.maxImgSize"
          :enlarge="option.enlarge"
          :mode="option.mode"
        ></VueCropper>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="finish">确 认</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { VueCropper } from "vue-cropper";
export default {
  name: "cropper-photo",
  components: { VueCropper },
  props: {
    visible: {
      type: Boolean,
      require: true
    },
    file: {
      type: Object,
      default: () => ({
        url: ""
      }),
      require: true
    },
    options: {
      type: Object
    }
  },
  watch: {
    file: {
      handler(val) {
        if (val.url) {
          this.option.img = val.url;
        }
      },
      deep: true
    },
    options: {
      handler(val) {
        this.option = Object.assign({}, this.option, val);
      },
      deep: true
    },
    visible: {
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            this.Cropper = this.$refs.cropper;
          });
        }
      }
    }
  },
  data() {
    return {
      Cropper: null,
      // 裁剪组件的基础配置option
      option: {
        img: "", //裁剪图片的地址
        outputSize: 0.8, //裁剪生成图片的质量(可选0.1 - 1)
        outputType: "jpeg", //裁剪生成图片的格式（jpeg || png || webp）
        info: true, //图片大小信息
        canScale: true, //图片是否允许滚轮缩放
        autoCrop: true, //是否默认生成截图框
        autoCropWidth: 300, //默认生成截图框宽度
        autoCropHeight: 200, //默认生成截图框高度
        fixed: true, //是否开启截图框宽高固定比例
        fixedNumber: [7, 5], //截图框的宽高比例
        full: true, //false按原比例裁切图片，不失真
        fixedBox: false, //固定截图框大小，不允许改变
        canMove: true, //上传图片是否可以移动
        canMoveBox: true, //截图框能否拖动
        original: false, //上传图片按照原始比例渲染
        centerBox: false, //截图框是否被限制在图片里面
        height: true, //是否按照设备的dpr 输出等比例图片
        infoTrue: false, //true为展示真实输出图片宽高，false展示看到的截图框宽高
        maxImgSize: "max", //限制图片最大宽度和高度
        enlarge: 1, //图片根据截图框输出比例倍数
        mode: "230px 150px" //图片默认渲染方式
      }
    };
  },
  methods: {
    finish() {
      this.$refs.cropper.getCropBlob(data => {
        const newFile = new File([data], this.file.name, {
          type: this.file.raw.type
        });
        const cropperFile = Object.assign({}, this.file, {
          raw: newFile,
          url: URL.createObjectURL(data)
        });
        this.$emit("getFileList", [cropperFile]);
        this.$emit("update:visible", false);
        // console.log(cropperFile, "cropperFile");
        this.$message.success("裁剪成功！");
      });
    },
    cancel() {
      this.$emit("getFileList", []);
      this.$emit("update:visible", false);
    }
  }
};
</script>

<style lang="scss" scoped>
* {
  touch-action: none;
}
</style>
